<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>FreeGroup Draw2D 0.9.26 :: Triangle</title>
        <link type="text/css" rel="stylesheet" href="../demo.css" />

    <!-- common, all times required, imports -->        <!--REGEXP_START_REMOVE-->
	<SCRIPT src="../../String.js"></SCRIPT>
	<SCRIPT src="../../wz_jsgraphics.js"></SCRIPT>
	<SCRIPT src="../../events.js"></SCRIPT>
	<SCRIPT src="../../debug.js"></SCRIPT>
	<SCRIPT src="../../dragdrop.js"></SCRIPT>
	<SCRIPT src="../../UUID.js"></SCRIPT>
	<SCRIPT src="../../PositionConstants.js"></SCRIPT>
	<SCRIPT src="../../Graphics.js"></SCRIPT>
	<SCRIPT src="../../Color.js"></SCRIPT>
	<SCRIPT src="../../ArrayList.js"></SCRIPT>
	<SCRIPT src="../../Point.js"></SCRIPT>
	<SCRIPT src="../../Dimension.js"></SCRIPT>
	<SCRIPT src="../../Border.js"></SCRIPT>
	<SCRIPT src="../../LineBorder.js"></SCRIPT>
	<SCRIPT src="../../Figure.js"></SCRIPT>
	<SCRIPT src="../../Node.js"></SCRIPT>
        <SCRIPT src="../../VectorFigure.js"></SCRIPT>
        <SCRIPT src="../../SVGFigure.js"></SCRIPT>
	<SCRIPT src="../../Label.js"></SCRIPT>
	<SCRIPT src="../../Oval.js"></SCRIPT>
	<SCRIPT src="../../Circle.js"></SCRIPT>
	<SCRIPT src="../../Rectangle.js"></SCRIPT>
	<SCRIPT src="../../ImageFigure.js"></SCRIPT>
	<SCRIPT src="../../Port.js"></SCRIPT>
	<SCRIPT src="../../InputPort.js"></SCRIPT>
	<SCRIPT src="../../OutputPort.js"></SCRIPT>
	<SCRIPT src="../../Line.js"></SCRIPT>
	<SCRIPT src="../../ConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../../NullConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../../ManhattanConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../../BezierConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../../FanConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../../Connection.js"></SCRIPT>
	<SCRIPT src="../../ConnectionAnchor.js"></SCRIPT>
	<SCRIPT src="../../ChopboxConnectionAnchor.js"></SCRIPT>
	<SCRIPT src="../../ConnectionDecorator.js"></SCRIPT>
	<SCRIPT src="../../ArrowConnectionDecorator.js"></SCRIPT>
	<SCRIPT src="../../CompartmentFigure.js"></SCRIPT>
	<SCRIPT src="../../CanvasDocument.js"></SCRIPT>
	<SCRIPT src="../../Annotation.js"></SCRIPT>
	<SCRIPT src="../../ResizeHandle.js"></SCRIPT>
	<SCRIPT src="../../LineStartResizeHandle.js"></SCRIPT>
	<SCRIPT src="../../LineEndResizeHandle.js"></SCRIPT>
	<SCRIPT src="../../Canvas.js"></SCRIPT>
	<SCRIPT src="../../Workflow.js"></SCRIPT>
	<SCRIPT src="../../WindowFigure.js"></SCRIPT>
	<SCRIPT src="../../Button.js"></SCRIPT>
	<SCRIPT src="../../ToggleButton.js"></SCRIPT>
	<SCRIPT src="../../SnapToHelper.js"></SCRIPT>
	<SCRIPT src="../../SnapToGeometry.js"></SCRIPT>
	<SCRIPT src="../../SnapToGeometryEntry.js"></SCRIPT>
	<SCRIPT src="../../SnapToGrid.js"></SCRIPT>
	<SCRIPT src="../../ToggleButton.js"></SCRIPT>
	<SCRIPT src="../../ToolGeneric.js"></SCRIPT>
	<SCRIPT src="../../ToolPalette.js"></SCRIPT>
	<SCRIPT src="../../Dialog.js"></SCRIPT>
	<SCRIPT src="../../InputDialog.js"></SCRIPT>
	<SCRIPT src="../../PropertyDialog.js"></SCRIPT>
	<SCRIPT src="../../AnnotationDialog.js"></SCRIPT>
	<SCRIPT src="../../PropertyWindow.js"></SCRIPT>
	<SCRIPT src="../../ColorDialog.js"></SCRIPT>
	<SCRIPT src="../../LineColorDialog.js"></SCRIPT>
	<SCRIPT src="../../BackgroundColorDialog.js"></SCRIPT>
	<SCRIPT src="../../EditPartFactory.js"></SCRIPT>
	<SCRIPT src="../../AbstractObjectModel.js"></SCRIPT>
	<SCRIPT src="../../AbstractConnectionModel.js"></SCRIPT>
	<SCRIPT src="../../PropertyChangeEvent.js"></SCRIPT>
	<SCRIPT src="../../GraphicalViewer.js"></SCRIPT>
	<SCRIPT src="../../GraphicalEditor.js"></SCRIPT>
	<SCRIPT src="../../xmlsax.js"></SCRIPT>
	<SCRIPT src="../../xmlw3cdom.js"></SCRIPT>
	<SCRIPT src="../../XMLSerializer.js"></SCRIPT>
	<SCRIPT src="../../XMLDeserializer.js"></SCRIPT>
	<SCRIPT src="../../EditPolicy.js"></SCRIPT>

        <!-- undo/redo support (all times required too) -->
	<SCRIPT src="../../Command.js"></SCRIPT>
	<SCRIPT src="../../CommandStack.js"></SCRIPT>
	<SCRIPT src="../../CommandStackEvent.js"></SCRIPT>
	<SCRIPT src="../../CommandStackEventListener.js"></SCRIPT>
	<SCRIPT src="../../CommandAdd.js"></SCRIPT>
	<SCRIPT src="../../CommandDelete.js"></SCRIPT>
	<SCRIPT src="../../CommandMove.js"></SCRIPT>
	<SCRIPT src="../../CommandMoveLine.js"></SCRIPT>
	<SCRIPT src="../../CommandMovePort.js"></SCRIPT>
	<SCRIPT src="../../CommandResize.js"></SCRIPT>
	<SCRIPT src="../../CommandSetText.js"></SCRIPT>
	<SCRIPT src="../../CommandSetColor.js"></SCRIPT>
	<SCRIPT src="../../CommandSetBackgroundColor.js"></SCRIPT>
	<SCRIPT src="../../CommandConnect.js"></SCRIPT>
	<SCRIPT src="../../CommandReconnect.js"></SCRIPT>
	<SCRIPT src="../../Menu.js"></SCRIPT>
	<SCRIPT src="../../MenuItem.js"></SCRIPT>
	<SCRIPT src="../../mootools.js"></SCRIPT>
	<SCRIPT src="../../moocanvas.js"></SCRIPT>
        <!--REGEXP_END_REMOVE-->

        <!-- demo specific imports -->
	<SCRIPT src="model/FieldTypeModel.js"></SCRIPT>
	<SCRIPT src="model/FieldTypeModelBoolean.js"></SCRIPT>
	<SCRIPT src="model/FieldModel.js"></SCRIPT>
	<SCRIPT src="model/TableModel.js"></SCRIPT>
	<SCRIPT src="model/ForeignKeyModel.js"></SCRIPT>
	<SCRIPT src="model/DatabaseModel.js"></SCRIPT>

	<SCRIPT src="view/InputFieldFigure.js"></SCRIPT>
	<SCRIPT src="view/OutputFieldFigure.js"></SCRIPT>
	<SCRIPT src="view/ForeignKeyFigure.js"></SCRIPT>
	<SCRIPT src="view/TableFigure.js"></SCRIPT>

	<SCRIPT src="command/CommandMoveTable.js"></SCRIPT>

        // Editor
	<SCRIPT src="MyGraphicalEditor.js"></SCRIPT>
	<SCRIPT src="MyGraphicalEditorFactory.js"></SCRIPT>
</head>
<body onselectstart="return false;" style="margin:0px;padding:0px;" onkeydown="">
<div id="paintarea" style="position:absolute;left:0px;top:0px;width:3000px;height:3000px" >

</div>
<script>
// Demo data
var modelXML = 
'<?xml version="1.0"?>'+
'<model type="draw2d.DatabaseModel">'+
'<id type="String">dddddddd</id>'+
'<tables type="draw2d.ArrayList">'+
'   <data type="Array">'+
'      <index0 type="draw2d.TableModel">'+
'         <id type="String">t1</id>'+
'         <name type="string">juhu</name>'+
'         <pos type="draw2d.Point">'+
'            <x type="int">200</x>'+
'            <y type="int">150</y>'+
'         </pos>'+
'      </index0>'+
'      <index1 type="draw2d.TableModel">'+
'         <id type="String">t2</id>'+
'         <name type="string">juhuuuuu</name>'+
'         <pos type="draw2d.Point">'+
'            <x type="int">100</x>'+
'            <y type="int">100</y>'+
'         </pos>'+
'      </index1>'+
'   </data>'+
'   <increment type="int">10</increment>'+
'   <size type="int">2</size>'+
'</tables>'+
'</model>';

// XML => Object mapping
  var parser = new DOMImplementation();
  var modelDom = parser.loadXML(modelXML);
  var modelDoc = modelDom.getDocumentElement();
  var model = draw2d.XMLDeserializer.fromXML(modelDoc);

// Create the editor with the model object (root model object)
  var editor  = new draw2d.MyGraphicalEditor("paintarea", model);

  var table1 = model.getTableModel("juhu");
  var table2 = model.getTableModel("juhuuuuu");

  table1.addFieldModel(new draw2d.FieldModel("pkey"));
  table1.addFieldModel(new draw2d.FieldModel("name"));
  table1.addFieldModel(new draw2d.FieldModel("other_key"));

  table2.addFieldModel(new draw2d.FieldModel("pkey"));
  table2.addFieldModel(new draw2d.FieldModel("name"));

  table1.addForeignKeyModel(new draw2d.ForeignKeyModel("juhu","other_key","juhuuuuu","pkey"));
// Object => XML mapping
  var newXML = draw2d.XMLSerializer.toXML(model);
//  alert(newXML);
</script>

</body>
</html>
